<template>
    <view class="content">
        <view class="main">
            <!-- <van-nav-bar :title="title" left-arrow @click-left="onClickLeft"> </van-nav-bar> -->
            <!--滚动内容区域-->
            <scroll-view :refresher-enabled="false" class="scroll-content" @scrolltolower="scrolltolower"
                show-scrollbar="false" @scroll="scrollPage" @refresherrefresh="refresherpulling"
                :refresher-triggered="isrefresher" scroll-y :lower-threshold="110">
                <!-- <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading> -->
                <view class="content-top fixed_top" :style="bgOpacity" id="content_top"
                    :class="{ fixed_top: scrolling }">
                    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
                </view>
                <view class="scroll-card">
                    <!-- 背景图轮播哦 -->
                    <view class="sur_box_bg">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/servicerStaffBg.png"
                            alt="">
                        <view class="pageTitle">
                            <view class="pageTitle_top">我的服务</view>
                            <view class="pageMainContent">统计所有服务数据</view>
                        </view>
                    </view>
                    <view class="card_top">
                        <!-- <view class="card_top_content"> -->
                        <view class="serviceStaffInfo_card">
                            <view class="serviceStaffImg"><img
                                    :src="empInfo.avatarUrl ? empInfo.avatarUrl : 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my/info.png'" alt="" ></view>
                            <view class="serviceStaffText">
                                <view class="staffName">{{empInfo.name}} <span v-if="empInfo.workYear && empInfo.workYear >0">{{ empInfo.workYear}}年工作经验</span></view>
                                <view class="staffInfoLabel"  v-if="empInfo.labels.length>0">
                                    <view class="labelItem" v-for="(item, index) in empInfo.labels" :key="index">
                                        {{ item.name }} <span style="margin: 0 10rpx;" v-if="empInfo.labels.length > 0 && index<(empInfo.labels.length -1)">|</span>
                                    </view>
                                </view>
                            </view>
                            <!-- <view class="serviceInfoTel"> <van-icon name="phone" siza="22" /> </view> -->
                        </view>
                    </view>
                    <view class="task_container">
                        <!-- <view class="card">
                            <view class="statusTypeIcon"><img
                                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/awaitingServiceIcon.png"
                                    alt="" mode="widthFix"></view>
                            <view class="task_info">
                                <view class="statusType_name">待服务任务</view>
                                <view class="type_num"> 近期有3个待服务任务 </view>
                            </view>
                            <view class="serviceArrow"> <van-icon name="arrow" siza="22" /> </view>
                        </view> -->
                        <view class="task-item" @tap="toPages(0)">
                            <view class="task-icon">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/pendingTaskIcon.png" /><!-- 已服务任务图标路径 -->
                            </view>
                            <view class="task-info">
                                <text class="task-title">待服务任务</text>
                                <text class="task-desc">近期有{{pendingTaskCount}}个待服务任务</text>
                            </view>
                            <view class="task-number">
                                <text class="number" style="color:#4db6bc;">{{ pendingTaskCount }}</text>
                                <view class="serviceArrow"> <van-icon name="arrow" size="22" color="#666666"/> </view>
                            </view>
                        </view>
                        <view class="task-item" @tap="toPages(1)">
                            <view class="task-icon">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/startTaskIcon.png" /><!-- 已服务任务图标路径 -->
                            </view>
                            <view class="task-info">
                                <text class="task-title">服务中</text>
                                <text class="task-desc">服务中有待确认</text>
                            </view>
                            <view class="task-number">
                                <text class="number" style="color: #148af4;">{{ servingTaskCount }}</text>
                                <view class="serviceArrow"> <van-icon name="arrow" size="22" color="#666666"/> </view>
                            </view>
                        </view>
                        <view class="task-item" @tap="toPages(2)">
                            <view class="task-icon">
                                <img src=" https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/completedTaskIcon.png" /><!-- 已服务任务图标路径 -->
                            </view>
                            <view class="task-info">
                                <text class="task-title">已完成</text>
                                <text class="task-desc">近期已完成服务有{{waitEvaluateCount}}个待评价</text>
                            </view>
                            <view class="task-number">
                                <text class="number">{{ completedTaskCount }}</text>
                                <view class="serviceArrow"> <van-icon name="arrow" size="22" color="#666666"/> </view>
                            </view>
                        </view>
                        <view class="task-item" @tap="toPages(3)">
                            <view class="task-icon">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/cancelTaskIcon.png" /><!-- 已服务任务图标路径 -->
                            </view>
                            <view class="task-info">
                                <text class="task-title">已取消</text>
                                <text class="task-desc">已取消的有{{cancelTaskCount}}个服务</text>
                            </view>
                            <view class="task-number">
                                <text class="number" style="color: #ff6203;">{{ cancelTaskCount }}</text>
                                <view class="serviceArrow"> <van-icon name="arrow" size="22" color="#666666"/> </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import pageIds from '../../assets/pageId.json'
import {myStatisticsApi,myEmpInfoApi} from '@/api/staff'
export default {
    components: {

    },
    data () {
        return {
            empInfo:{
                labels: [] // 标签数组
            }, //员工信息
            name: '',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            isrefresher: false,
            tableList: [],
            title:'',
            labelList:['清扫服务','全屋保洁',],
            pendingTaskCount: 0, // 待服务任务数量
            completedTaskCount: 0, // 已服务任务数量
            cancelTaskCount:0, //取消任务数量
            servingTaskCount:0, //服务中任务数量
            waitEvaluateCount:0,//待评价
            pageSize:10,
            pageNum:1,
            total:0,
            type:'',//参数

        }
    },
    onLoad (options) {
        if(options){
            console.log(options, 'options.name')
        }
    },
    onReady () {
        this.onRefresherMethod()
        this.topStyleWhite()
        // const nameMapping = {
        //     '油烟机':'rangeHood',
        //     '集成灶':'jicehngzao',
        //     '洗衣机':'washMachine',
        //     '地暖':'underfloorHeating',
        //     '空调':'conditioner'
        // }
        // this.serviceItems.forEach(item=>{
        //     const serviceName =nameMapping[item.name]
        //     const page = pageIds.applianceClean.find(page=> page.serviceName === serviceName)
        //     if (page) {
        //         item.id = page.id;
        //     } else {
        //         item.id = '未找到';
        //     }
        // })
    },
    onShow(){
        this.getServiceEmpInfo()
        this.getServiceStatistics()
    },
    methods: {
        refresherpulling () {
            if (!this.isrefresher) {
                this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
                this.onRefresherMethod()
            }
        },
        onRefresherMethod () {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            this.loadingIsShow = false
            // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            this.time = setTimeout(e => {
                this.isrefresher = false
            }, 300)
           
        },
        scrolltolower () {

        },
       
        scrollPage (e) {
            // this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
            console.log('顶部滚动距离', e.detail.scrollTop)
            if (e.detail.scrollTop > 0.2 && !this.scrolling) {
                this.scrolling = true
            } else if (e.detail.scrollTop <= 0.2 && this.scrolling) {
                this.scrolling = false
            }
            this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            // console.log(this.bgOpacity)rgba(127, 198, 185, 1)
        },
        onClickLeft () {
            uni.navigateBack()
        },
        topStyleWhite () {
            // 手机顶部
            // eslint-disable-next-line no-undef
            wx.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: 'rgba(255, 255, 255, 0)'
            })
        },
        toPages(val){
            console.log(val)
            uni.navigateTo({
               url: `/pages/serviceStaff/taskList?type=${val}`
            })
        },
        // 服务 预约统计
        async getServiceStatistics(){
            const res = await myStatisticsApi()
            if(res.code === 200){
                this.pendingTaskCount = res.data.waitCount
                this.completedTaskCount = res.data.completeCount
                this.cancelTaskCount = res.data.cancelCount
                this.servingTaskCount = res.data.servingCount
                this.waitEvaluateCount = res.data.waitEvaluateCount
            }
        },
        // 服务人员信息
        async getServiceEmpInfo(){
            const res = await myEmpInfoApi()
            if(res.code === 200){
                this.empInfo = res.data
                const workYear = res.data.workYear
                this.empInfo.workYear = workYear.replace(/(\.0+|(?<=\.\d)0+)$/, '')
                // this.labelList = res.data.labelList
            }
        }
 

    }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	overflow: hidden;
    z-index: -2;
	background-size: 100%;
	background-color: #F9F9F9;
}
.main {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    background-color: #F9F9F9;

    .fixed_top {
        position: fixed;
        width: 100%;
        z-index: 999;
    }

    .top_display {
        display: none;
    }
}
::v-deep .van-nav-bar {
    background-color: transparent;
}


::v-deep .van-nav-bar__arrow {
    color: #111111 !important;
}

::v-deep #navBar .van-icon {
    color: #111111 !important;
}


.scroll-content {
    flex: 1;
    height: 1px;
}
.scroll-content-box{
    flex: 1;
    height: 1px;
}

.backIcon {
    margin-top: 8px;
}

.scroll-card {
    // padding: 105px 12px 48px;
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: -1;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}
// 背景图部分
.sur_box_bg {
	position: relative;
	// top: 0px;
	width: 100%;
	height: 510rpx;

	img {
		width: 100%;
		height: 510rpx;
	}

    .pageTopTitleContent{
        position: absolute;
        top: 221rpx;
        right: 69rpx;
        .pageTopTitle{
            font-size: 48rpx;
            text-align: right;
            color: #4E78D1;
            line-height: 48rpx;
        }
        .pageTopSubtitle{
            margin-top: 22rpx;
            border-radius: 15px;
            background: #4e78d1;
            font-size: 20rpx;
            line-height: 20rpx;
            text-align: right;
            color: #FFFFFF;
            padding: 5rpx 14rpx;
        }
    }
    .pageTitle{
        position: absolute;
        top: 208rpx;
        left: 48rpx;
        .pageTitle_top{
            height: 66rpx;
            font-size: 70rpx;
            text-align: left;
            color: #111111;
            font-weight: bold;
        }

        .pageMainContent{
            margin-top: 30rpx;
            height: 35rpx;
            font-size: 36rpx;
            text-align: left;
            color: #111111;
        }
    }
}


.card_top{
    border-radius: 12px;
    background: #ffffff;
    margin-left: 24rpx;
    margin-right: 24rpx;
    // margin-top: 394rpx;
    margin-top: -80rpx;
    z-index: 1;

}

.serviceStaffInfo_card {
    padding: 40rpx 48rpx;
    display: flex;
    border-radius: 12rpx;
    background: #fff9f5;
    align-items: center;

    .serviceStaffImg {
        // width: 15%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
            // width: 100%;
            // height: auto;
            border-radius: 50%;
            width: 114rpx;
            height: 114rpx;
            line-height: 114rpx;
        }
    }

    .serviceStaffText {
        margin-left: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .staffName {
            font-weight: bolder;
            font-size: 38rpx;
            text-align: left;
            color: #111111;
            line-height: 38rpx;
            display: flex;
            align-items: center;

            span {
                font-weight: normal;
                font-size: 26rpx;
                text-align: left;
                color: #111111;
                line-height: 26rpx;
                padding-left: 20rpx;
            }
        }

        .staffInfoLabel {
            display: flex;
            align-items: center;
            margin-top: 18rpx;

            .labelItem {
                color: #666666;
                font-size: 22rpx;
                line-height: 22rpx;
                // border: 1px solid #FF6203;
                // background-color: #FFF4ED;
                // color: #FF6203;
                // font-size: 20rpx;
                // line-height: 20rpx;
                // text-align: center;
                // padding: 10rpx 22rpx;
                // // border-radius: 25rpx;
                // margin-right: 16rpx;
            }
            .labelItem:last-child {
                margin-right: 0rpx;
            }
        }
    }

    .serviceInfoTel {
        text-align: right;
        margin-left: 60rpx;
    }

}

.task_container{
    margin-left: 24rpx;
    margin-right: 24rpx;
    // margin-top: 40rpx;
}
.card{
    margin-top: 40rpx;
    padding: 40rpx 24rpx;
    display: flex;
    border-radius: 12rpx;
    background: #fff;

    .statusTypeIcon {
        width: 15%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
            width: 100%;
            height: auto;
        }
    }

    .task_info {
        margin-left: 26rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .statusType_name {
            font-weight: bolder;
            font-size: 26rpx;
            text-align: left;
            color: #111111;
            line-height: 26rpx;

        }
        .type_num{
            font-size: 23rpx;
            text-align: left;
            color: #666666;
        }
    }

    .serviceInfoTel {
        text-align: right;
        margin-left: 60rpx;
    }
}
.task-item {
    margin-top: 40rpx;
    padding: 40rpx 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 12rpx;
}
.task-icon {
  width: 104rpx;
  height: 104rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-icon img {
    width: 104rpx;
    height: 104rpx;
}
.task-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.task-title {
  font-size: 32rpx;
  font-weight: bold;
}
.task-desc {
  font-size: 24rpx;
  color: #999;
}
.task-number {
    font-size: 81rpx;
    text-align: left;
    font-weight: bolder;
    display: flex;
    align-items: center;
}
.number {
//   color: inherit;
  color: #4FD54F; /* 可根据需求换颜色 */
}
.serviceArrow{
    padding-left: 37rpx;
    // width: ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.b12{
    margin-bottom: 12px;
}
</style>
